html,
body,
#root {
  height: 100%;
  font-size: 14px;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

canvas {
  display: block;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

p {
  margin-bottom: 8px;
}

img {
  width: 100%;
}

image{
  width: 100%;
}

a {
  color: $text-color;

  &:hover {
    color: $primary-color;
  }
}

button::after {
  border: none;
}

/* text */
.text-10 {
  font-size: 10px !important;
}

.text-12 {
  font-size: 12px !important;
}

.text-14 {
  font-size: 14px !important;
}

.text-15 {
  font-size: 15px !important;
}

.text-16 {
  font-size: 32rpx !important;
}

.text-18 {
  font-size: 18px !important;
}

.text-20 {
  font-size: 20px !important;
}

.text-22 {
  font-size: 22px !important;
}

.text-24 {
  font-size: 24px !important;
}

.text-26 {
  font-size: 26px !important;
}

.text-28 {
  font-size: 28px !important;
}

.text-30 {
  font-size: 30px !important;
}

.text-32 {
  font-size: 32px !important;
}

.text-40 {
  font-size: 40px !important;
}

.text-60 {
  font-size: 60px !important;
}

.text-Abc {
  text-transform: Capitalize;
}

.text-ABC {
  text-transform: Uppercase;
}

.text-abc {
  text-transform: Lowercase;
}

.text-indent {
  text-indent: 2rem;
}

.text-price::before {
  content: '¥';
  font-size: 80%;
  margin-right: 5px !important;
}

.text-cut {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.text-break {
  word-break: break-all;
}

.text-bold {
  font-weight: bold;
}

.text-bold-400 {
  font-weight: 400;
}

.text-bold-500 {
  font-weight: 500;
}

.text-bold-600 {
  font-weight: 600;
}

.text-bold-700 {
  font-weight: 700;
}

.text-bold-800 {
  font-weight: 800;
}

.text-center {
  text-align: center;
}

.text-content {
  line-height: 1.6;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-aj {
  text-align: justify;
  text-justify: inter-ideograph;
}

.text-u {
  text-decoration: underline;
}

.text-o {
  text-decoration: overline;
}

.text-l {
  text-decoration: line-through;
}

.text-auto-wrap {
  word-wrap: break-word;
  word-break: normal;
}

.text-wrap {
  word-break: break-all;
}

/*text color*/
.text-color {
  color: $text-color !important;
}

/*line-clamp*/
.line-clamp-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-clamp-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-clamp-5 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* flex弹性布局 */
.flex {
  display: flex;
}

.flex-auto {
  flex: 0 0 auto;
}

.basis-10 {
  flex-basis: 20%;
}

.basis-20 {
  flex-basis: 40%;
}

.basis-25 {
  flex-basis: 50%;
}

.basis-60 {
  flex-basis: 60%;
}

.basis-80 {
  flex-basis: 80%;
}

.flex-sub {
  flex: 1;
}

.flex-twice {
  flex: 2;
}

.flex-treble {
  flex: 3;
}

.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-column {
  flex-direction: column;
}

.flex-column-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-center {
  align-items: center;
}

.align-stretch {
  align-items: stretch;
}

.align-baseline {
  align-items: baseline;
}

.self-start {
  align-self: flex-start;
}

.self-center {
  align-self: center;
}

.self-end {
  align-self: flex-end;
}

.self-stretch {
  align-self: stretch;
}

.self-baseline {
  align-self: baseline;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly{
  justify-content: space-evenly;
}

/* margin */
.mt-xxs,
.my-xxs,
.m-xxs {
  margin-top: $spacing-xxs !important;
}

.mb-xxs,
.my-xxs,
.m-xxs {
  margin-bottom: $spacing-xxs !important;
}

.ml-xxs,
.mx-xxs,
.m-xxs {
  margin-left: $spacing-xxs !important;
}

.mr-xxs,
.mx-xxs,
.m-xxs {
  margin-right: $spacing-xxs !important;
}

.mt-xs,
.my-xs,
.m-xs {
  margin-top: $spacing-xs !important;
}

.mb-xs,
.my-xs,
.m-xs {
  margin-bottom: $spacing-xs !important;
}

.ml-xs,
.mx-xs,
.m-xs {
  margin-left: $spacing-xs !important;
}

.mr-xs,
.mx-xs,
.m-xs {
  margin-right: $spacing-xs !important;
}

.mt-sm,
.my-sm,
.m-sm {
  margin-top: $spacing-sm !important;
}

.mb-sm,
.my-sm,
.m-sm {
  margin-bottom: $spacing-sm !important;
}

.ml-sm,
.mx-sm,
.m-sm {
  margin-left: $spacing-sm !important;
}

.mr-sm,
.mx-sm,
.m-sm {
  margin-right: $spacing-sm !important;
}

.mt-md,
.my-md,
.m-md {
  margin-top: $spacing-md !important;
}

.mb-md,
.my-md,
.m-md {
  margin-bottom: $spacing-md !important;
}

.ml-md,
.mx-md,
.m-md {
  margin-left: $spacing-md !important;
}

.mr-md,
.mx-md,
.m-md {
  margin-right: $spacing-md !important;
}

.mt-lg,
.my-lg,
.m-lg {
  margin-top: $spacing-lg !important;
}

.mb-lg,
.my-lg,
.m-lg {
  margin-bottom: $spacing-lg !important;
}

.ml-lg,
.mx-lg,
.m-lg {
  margin-left: $spacing-lg !important;
}

.mr-lg,
.mx-lg,
.m-lg {
  margin-right: $spacing-lg !important;
}

.mt-xl,
.my-xl,
.m-xl {
  margin-top: $spacing-xl !important;
}

.mb-xl,
.my-xl,
.m-xl {
  margin-bottom: $spacing-xl !important;
}

.ml-xl,
.mx-xl,
.m-xl {
  margin-left: $spacing-xl !important;
}

.mr-xl,
.mx-xl,
.m-xl {
  margin-right: $spacing-xl !important;
}

.mt-xxl,
.my-xxl,
.m-xxl {
  margin-top: $spacing-xxl !important;
}

.mb-xxl,
.my-xxl,
.m-xxl {
  margin-bottom: $spacing-xxl !important;
}

.ml-xxl,
.mx-xxl,
.m-xxl {
  margin-left: $spacing-xxl !important;
}

.mr-xxl,
.mx-xxl,
.m-xxl {
  margin-right: $spacing-xxl !important;
}

/* padding */
.pt-xxs,
.py-xxs,
.p-xxs {
  padding-top: $spacing-xxs !important;
}

.pb-xxs,
.py-xxs,
.p-xxs {
  padding-bottom: $spacing-xxs !important;
}

.pl-xxs,
.px-xxs,
.p-xxs {
  padding-left: $spacing-xxs !important;
}

.pr-xxs,
.px-xxs,
.p-xxs {
  padding-right: $spacing-xxs !important;
}

.pt-xs,
.py-xs,
.p-xs {
  padding-top: $spacing-xs !important;
}

.pb-xs,
.py-xs,
.p-xs {
  padding-bottom: $spacing-xs !important;
}

.pl-xs,
.px-xs,
.p-xs {
  padding-left: $spacing-xs !important;
}

.pr-xs,
.px-xs,
.p-xs {
  padding-right: $spacing-xs !important;
}

.pt-sm,
.py-sm,
.p-sm {
  padding-top: $spacing-sm !important;
}

.pb-sm,
.py-sm,
.p-sm {
  padding-bottom: $spacing-sm !important;
}

.pl-sm,
.px-sm,
.p-sm {
  padding-left: $spacing-sm !important;
}

.pr-sm,
.px-sm,
.p-sm {
  padding-right: $spacing-sm !important;
}

.pt-md,
.py-md,
.p-md {
  padding-top: $spacing-md !important;
}

.pb-md,
.py-md,
.p-md {
  padding-bottom: $spacing-md !important;
}

.pl-md,
.px-md,
.p-md {
  padding-left: $spacing-md !important;
}

.pr-md,
.px-md,
.p-md {
  padding-right: $spacing-md !important;
}

.pt-lg,
.py-lg,
.p-lg {
  padding-top: $spacing-lg !important;
}

.pb-lg,
.py-lg,
.p-lg {
  padding-bottom: $spacing-lg !important;
}

.pl-lg,
.px-lg,
.p-lg {
  padding-left: $spacing-lg !important;
}

.pr-lg,
.px-lg,
.p-lg {
  padding-right: $spacing-lg !important;
}

.pt-xl,
.py-xl,
.p-xl {
  padding-top: $spacing-xl !important;
}

.pb-xl,
.py-xl,
.p-xl {
  padding-bottom: $spacing-xl !important;
}

.pl-xl,
.px-xl,
.p-xl {
  padding-left: $spacing-xl !important;
}

.pr-xl,
.px-xl,
.p-xl {
  padding-right: $spacing-xl !important;
}

.pt-xxl,
.py-xxl,
.p-xxl {
  padding-top: $spacing-xxl !important;
}

.pb-xxl,
.py-xxl,
.p-xxl {
  padding-bottom: $spacing-xxl !important;
}

.pl-xxl,
.px-xxl,
.p-xxl {
  padding-left: $spacing-xxl !important;
}

.pr-xxl,
.px-xxl,
.p-xxl {
  padding-right: $spacing-xxl !important;
}

/* background color */
.bg-default {
  background-color: $bg-color;
}

.bg-white {
  background-color: $bg-color-white;
}

/* border  */
.border-radius {
  border-radius: $border-radius;
}

.border {
  border: 1px solid $border-color;
}

.border-top {
  border-top: 1px solid $border-color;
}

.border-bottom {
  border-bottom: 1px solid $border-color;
}

.border-left {
  border-left: 1px solid $border-color;
}

.border-right {
  border-right: 1px solid $border-color;
}

/* components width */
.button-100 {
  width: 100%;
}

/* input */
.input-sm {
  height: 36px !important;
}

.input-md {
  height: 48px;
}

:deep(.u-popup__content) {
  border-radius: 24rpx !important;
}

:deep(.u-toast) {
  .u-toast__content{
    padding: 24rpx 40rpx !important;
  }
  .u-icon__icon{
    font-size: 32rpx !important;
    line-height: 32rpx !important;
  }
}